SDK接入

简介

Bugly React Native端 SDK 集成在 React Native 的JS层，收集JS层运行时的数据。

danger

React Native 端 SDK 处于灰度验证阶段，建议业务小规模接入测试，质量验证符合预期后，再正式上线

下载SDK

// 设置腾讯内部源
npm config set registry https://mirrors.tencent.com/npm/
npm install @tencent/bugly-rn-sdk@1.0.0-beta.1

SDK初始化

import Aegis from '@tencent/bugly-rn-sdk';
const aegis = new Aegis({
  id : 'xxxx', // 接入产品的app id，必填项
  appKey: 'xxxxxxx', // 接入产品的 app key，必填项
  aid: "deviceID", // 设备ID，不同设备的设备ID应不相同，建议填写
  env: "debug", // sdk在控制台输出日志的级别，“debug”为输出所有日志。默认为“production”，只输出sdk运行时的错误日志。选填项
  buglyType: "pro", // 确定上报域名，必填项
  plugin:{
    error: true, // 开启错误监控
  }
});

提醒

1. SDK使用@react-native-community/netinfo获得网络信息，如果没有该第三方库，返回的网络类别为unknow
2. aegis初始化没有设置aid时，SDK会随机生成设备ID。SDK使用@react-native-async-storage/async-storage来持久化存储设备ID，如果没有该第三方库，每次启动应用时，SDK会生成不同的设备ID

React Native 主要使用以下第三方库实现页面导航功能：React Navigation以及React Native Navigation。 业务可以根据接下来的指引来启动 SDK 的页面访问功能。

React Navigation

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
function App() {
  const Stack = createNativeStackNavigator();
  const containerRef = useNavigationContainerRef();
  return (<NavigationContainer 
            ref = {containerRef} 
            onReady={
              () => {
                // 使用wrapNavigationRef开启页面访问功能
                aegis.wrapNavigationRef(containerRef);
              }
            }
            >
  <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  </NavigationContainer>
  );
}

React Native Navigation

在aegis初始化时，传入React Native Navigation库的Navigation

import { Navigation } from 'react-native-navigation';
const aegis = new Aegis({
  // 配置项跟SDK初始化的一样
  navigation: Navigation,
});